import {
    songUrl,
    songDetail
} from '@/library/api/api'
import filterArrObj from '@/library/api/deteleObject.js'

export default {
    data() {
        return {
            music:{
                id:this.$store.getters.doneTodos.musicUrl,
                url:"",
                picUrl:"",
                name:"",
                ar:"",
                dt:"",
            },
            show:false,
            num:0,
            list:[],
            Arr:[],
            n:0,
            r:0,
            info:false,
            isplay:false,
            progress:0,
            progressing_audio:0,
            second:0,
            length:0,
            timer:"",
            value: 100,
            voiceShow:false
        }
    },
    components:{
        filterArrObj,
    },
    methods:{
        voice() {
            this.voiceShow =! this.voiceShow
        },
        voiceChange() {
            // console.log(this.value);
            let audio = document.getElementById('audio')
            audio.volume=(this.value)/200
        },
        format(percentage) {
            return percentage === 100 ? ' ' : ` `;
        },
        returnMusic(data) {
            let audio = document.getElementById('audio')
            let re = document.getElementById('return')
            if(data===0) {
                re.classList = "fa fa-retweet"
                audio.onended=function() {
                    // this.n=this.n+1
                    audio.play()
                }
            } else if(data===1) {
                re.classList = "fa fa-history"
                audio.onended=function() {
                    audio.load()
                }
            }
        },
        play() {
            let audio = document.getElementById('audio')
            let play = document.getElementById('play')
            if(this.isplay===true) {
                audio.play()
                play.classList = "fa fa-pause"
                this.timer = setInterval( () => {
                    this.progress = this.progress+100
                    this.progressing_audio = (this.progress/this.length)*100
                    this.second = this.second + 0.1 ; 
                    if (this.progressing_audio >= 100 ) {
                        clearInterval(this.timer);
                        this.progressing_audio = 0; 
                        this.second = 0 ;
                    }
                }, 100) 
            } else if (this.isplay===false) {
                audio.pause()
                play.classList = "fa fa-play"
                clearInterval(this.timer);
            }
        },
        go(data) {
            // console.log(data);
            if(data==-1) {
                this.n=this.n-1
                if(this.n==-1) {
                    this.n=this.Arr.length-1
                }
            } else if (data==1) {
                this.n=this.n+1
                if(this.n==this.Arr.length-1) {
                    this.n=0
                }
            }
        },
        reload() {
            this.list = []
            this.Arr = []
            this.num = 0
            this.info = false
            // console.log(this.Arr[0]);
            let play = document.getElementById('play')
                play.classList = "fa fa-play"
            clearInterval(this.timer)
            this.progressing_audio = 0
        },
        add() {
            this.music = {
                id:this.$store.getters.doneTodos.musicUrl,
                url:"",
                picUrl:"",
                name:"",
                ar:"",
                dt:"",
            }
            let newArr = this.music
            this.list.push(newArr)
            this.Arr = filterArrObj(this.list)
            this.num = this.Arr.length
        },
        getMusic() {
            songUrl({
                data:{
                    id:this.$store.getters.doneTodos.musicUrl
                }
            }).then(res=>{
                this.music.url = res.data[0].url
            })
    
            songDetail({
                data:{
                    ids:this.$store.getters.doneTodos.musicUrl
                }
            }).then(res=>{
                this.music.picUrl = res.songs[0].al.picUrl
                this.music.name = res.songs[0].name
                this.music.ar = res.songs[0].ar[0].name
                this.music.dt = res.songs[0].dt

                this.info = true
                let play = document.getElementById('play')
                play.classList = "fa fa-pause"
                this.isplay = true

                this.length = res.songs[0].dt
                // console.log(0.1/this.length);
                this.timer = setInterval( () => {
                    this.progress = this.progress+100
                    this.progressing_audio = (this.progress/this.length)*100
                    this.second = this.second + 0.1 ; 
                    if (this.progressing_audio >= 100 ) {
                        clearInterval(this.timer);
                        this.progressing_audio = 0; 
                        this.second = 0 ;
                    }
                }, 100) 
            })
        }
    },
    computed:{
        contractFile() {
            return this.$store.getters.doneTodos.musicUrl
        },
    },
    watch:{
        contractFile() {
            this.id = this.$store.getters.doneTodos.musicUrl
            this.getMusic()
            this.add()
        },
    }
}